<template>
  <el-container class="container">
    <el-aside style="width: 15%;">
      <el-card style="height: 97%">
      <el-input v-model="treeName" placeholder="请输入名称搜索" prefix-icon="el-icon-search"></el-input>
      <el-tree :data="data" :props="defaultProps" style="padding: 0px" @node-click="handleNodeClick"></el-tree>
      </el-card>
    </el-aside>
    <el-main style="padding-top: 0px">
      <el-card>
      <div>
        <el-form ref="queryParam" :model="queryParam" label-width="100px">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="用户名：" prop="userName">
                <el-input v-model="queryParam.userName" placeholder="请输入用户名" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开始日期：" prop="startDate">
                <el-date-picker v-model="queryParam.startDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="请选择开始日期" clearable size="small"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束日期：" prop="endDate">
                <el-date-picker v-model="queryParam.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="请选择结束日期" clearable size="small"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态：" prop="status" size="small">
                <el-select v-model="queryParam.status" placeholder="请选择状态" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in sexOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled" size="small"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="float: right">
            <el-button type="success" icon="el-icon-search" size="small" @click="searchAction">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh-left" size="small" @click="resetAction">重置</el-button>
          </div>
        </el-form>


        <!--         <el-row :gutter="8">-->
        <!--           <el-col :span="6">-->
        <!--             <el-input v-model="queryParam.name" placeholder="请输入名称或手机号搜索" ></el-input>-->
        <!--           </el-col>-->
        <!--           <el-col :span="6">-->
        <!--             <el-date-picker-->
        <!--               v-model="value2"-->
        <!--               type="daterange"-->
        <!--               align="right"-->
        <!--               unlink-panels-->
        <!--               range-separator="至"-->
        <!--               start-placeholder="开始日期"-->
        <!--               end-placeholder="结束日期"-->
        <!--               :picker-options="pickerOptions"-->
        <!--               style="width: 100%">-->
        <!--             </el-date-picker>-->
        <!--           </el-col>-->
        <!--           <el-col :span="6">-->
        <!--             <el-select v-model="statusValue" clearable placeholder="状态"style="width:100%">-->
        <!--               <el-option-->
        <!--                 v-for="item in options"-->
        <!--                 :key="item.statusValue"-->
        <!--                 :label="item.label"-->
        <!--                 :value="item.statusValue">-->
        <!--               </el-option>-->
        <!--             </el-select>-->
        <!--           </el-col>-->
        <!--           <el-col :span="6" style="align-items: flex-end">-->

        <!--           </el-col>-->
        <!--         </el-row>-->
      </div>
      <div style="margin-top: 15px">
        <el-row style="text-align: left;">
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="newAction">新增</el-button>
            <el-button type="success" icon="el-icon-edit" size="small">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
            <el-button type="warning" icon="el-icon-download" size="small" @click="handleExport">导出</el-button>
          </el-col>
        </el-row>
      </div>
      <!--用户列表-->
      <el-table :data="tableData" style="width: 100%;font-size: 13px;margin-top: 20px" v-loading="loading" border stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="userName" label="名称" width="120"></el-table-column>
        <el-table-column prop="nickName" label="昵称" width="120"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100">
          <template slot-scope="scope">
            {{scope.row.sex==0?'男':'女'}}
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="160"></el-table-column>
        <el-table-column prop="phone" label="电话" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status==0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createdUser" label="创建人" width="120"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间" width="120"></el-table-column>
        <el-table-column prop="modifiedUser" label="修改人" width="120"></el-table-column>
        <el-table-column prop="modifiedTime" label="修改时间" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 20, 50, 100]"
        :page-0="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: right; margin: 8px 8px ;padding: 0">
      </el-pagination>
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="30%">
        <el-form ref="from" v-model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名称" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入用户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户昵称" prop="nickName">
                <el-input v-model="form.nickName" placeholder="请输入用户昵称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-input v-model="form.sex" placeholder="请输入用户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入用户昵称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入电话号"></el-input>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="状态 " prop="status">-->
            <!--                <el-select v-model="form.status" placeholder="请选择">-->
            <!--                  <el-option-->
            <!--                    v-for="dict in sexOptions"-->
            <!--                    :key="dict.dictValue"-->
            <!--                    :label="dict.dictLabel"-->
            <!--                    :value="dict.dictValue"-->
            <!--                  ></el-option>-->
            <!--                </el-select>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
        </el-form>
      </el-dialog>
      </el-card>
    </el-main>
  </el-container>
</template>
<script>
  import {userList,exportUser} from '@/api/user'

  export default {
    name: "user",
    data() {
      return {
        tableData: [],
        total: 0,
        currentPage4: 4,
        queryName: '',
        value2: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //状态
        options: [
          {
            statusValue: '0',
            label: '激活'
          }, {
            statusValue: '1',
            label: '锁定'
          }
        ],
        //状态值
        statusValue: '',
        //树搜索值
        treeName: '',
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },

        queryInfo: {
          //名称
          value: '',
          //日期
          value2: '',
          //状态
          statusValue: '',
          //当前页码
          pagenum: 1,
          //每页显示条数
          pagesize: 5
        },


        queryParam: {
          pageNum: 1,
          pageSize: 5,
          userName: '',
          startDate: undefined,
          endDate: undefined,
        },

        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '',
        // 表单参数
        form: {
          userName: '',
          nickName: '',
          sex: '',
          email: '',
          phone: '',
        },
        // 性别状态字典
        sexOptions: [],
        // 导出遮罩层
        exportLoading:false
      }
    },
    created() {
      this.getList();
    },
    methods: {
      handleClick() {
      },
      //每页多少条
      handleSizeChange(val) {
        this.queryParam.pageSize = val;
        this.getList();
      },
      //当前页为
      handleCurrentChange(val) {
        this.queryParam.pageNum = val;
        this.getList();
      },
      handleNodeClick(data) {
      },
      //获取所有用户集合
      getList() {
        userList(this.queryParam).then(res => {
          console.log(res)
          this.total = res.data.total;
          this.tableData = res.data.records;

        })
      },
      isPhoneNumber(tel) {
        const reg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
        return reg.test(tel);
      },
      //搜索
      searchAction() {
        this.getList();
      },
      //重置
      resetAction() {
        this.value2 = "";
        this.statusValue = "";
        this.queryName = "";
        this.getUserList();
      },
      //新建
      newAction() {
        this.open = true;
        this.title = "添加用户"
      },
      //导出
      handleExport(){
        const queryParams = this.queryParam;
        this.$confirm('是否确认导出所有用户数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportUser(queryParams);
        }).then(response => {
          //this.download(response.msg);
          alert("导出成功！")
          this.exportLoading = false;
        }).catch(() => {});
      }
    }
  }
</script>

<style scoped>
  .container {
    height: 100%;
    padding: 0;
    border-bottom: 0 white solid;
  }

</style>